<script setup>
import {LOGIN_BY_MAIL_ROUTE} from "@/router/routes/login/login.js";
import {ref, watchEffect, reactive} from "vue";
import {useRouter, useRoute} from "vue-router";
import {login} from "@/views/login/Login.js";
import {loginByPwdAPI} from "@/api/login.js";

const router = useRouter()
const route = useRoute()

// ***********
// * 登录信息 *
// ***********
const loginInfo = reactive({
  // mail: '1974498278@qq.com',
  // code: '299709'
  account: '',
  pwd: '',
})

// **************
// * 登录按钮状态 *
// **************
const loginBtnLoading = ref(false)
const loginBtnDisable = ref(false)

// ******************
// * 监听登录信息的输入 *
// ******************
watchEffect(() => {
  if (loginInfo.account.length <= 0 || loginInfo.pwd.length <= 0) {
    loginBtnDisable.value = true
  } else {
    loginBtnDisable.value = false
  }
})

// *******
// * 登录 *
// *******
function handleLogin() {
  login(
      loginBtnLoading,
      loginBtnDisable,
      () => {
        return loginByPwdAPI(loginInfo.account, loginInfo.pwd)
      },
      router,
      route
  )
}

const goLoginByMail = () => {
  router.push({name: LOGIN_BY_MAIL_ROUTE, query: {redirect: route.query.toRouteName}})
}
</script>

<template>
  <div class="login-by-mail glass-container mt-16 p-10 w-96">
    <div class="title text-gray-100 text-3xl">密码登录</div>
    <el-input v-model="loginInfo.account" class="mt-4" placeholder="请输入账号/邮箱/用户名" clearable maxlength="255"/>
    <el-input v-model="loginInfo.pwd" class="mt-4" placeholder="请输入密码" type="password" clearable show-password
              maxlength="16"/>
    <div class="mt-4 flex justify-between items-center">
      <el-button
          class="w-24" type="primary" plain
          :disabled="loginBtnDisable"
          :loading="loginBtnLoading"
          @click="handleLogin"
      >登录</el-button>
      <span @click="goLoginByMail" class="mr-4 p-1 cursor-pointer hover:text-blue-400">邮箱登录</span>
    </div>
  </div>
</template>

<style scoped>

</style>